<template>
  <div class="dialogs">
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="closeDialog"
      :width="dialogWidth"
      :top="'0vh'"
      v-draggable
      :modal-append-to-body="false"
      append-to-body
    >
      <!-- style="position: absolute; top: 50%; left:50%; transform: translate(-50%, -50%);width: 100%;height: 100%;" -->
      <span slot="title" style="font-size: 16px">
        <div style="position: relative">
          <span>{{ dialogTitle }}</span>
          <span
            v-if="
              dialogTitle == '区域安全评价' ||
              dialogTitle == '水害一张图' ||
              dialogTitle == '区域监测'
            "
          >
            <div class="selectshuizhi">
              <el-select
                v-model="selectValue3"
                placeholder="请选择"
                style="width: 115px"
                size="mini"
                @change="selectChange"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="(item, index) in selectData3"
                  :key="index"
                ></el-option>
              </el-select>
            </div>
          </span>
        </div>
      </span>
      <slot name="content"></slot>
      <!-- <div slot="footer">
        <el-button @click="confirmDialog" type="primary" size="small">确定</el-button>
        <el-button @click="cancelDialog" type="default" size="small">取消</el-button>
      </div> -->
    </el-dialog>
  </div>
</template>

<script>
import axios from "@/utils/request";
import { mapGetters, mapState } from "vuex";
// import 'vuedraggable/dist/vuedraggable.css';
// import draggable from 'vuedraggable';
export default {
  name: "Dialogs",
  props: {
    dialogTitle: {
      type: String,
      default: "自定义标题",
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    listData: {
      type: Array,
      default: () => [],
    },
    dialogWidth: {
      type: String,
      default: "90%",
    },
  },
  data() {
    return {
      selectValue3: "",
      selectData3: [],
    };
  },
  computed: {
    // ...mapState(["areaCode"]),
    ...mapGetters(["areaCode", "selectValue", "selectData"]),
  },
  watch: {
    selectData: {
      handler(newVal, oldVal) {
        this.selectData3 = newVal;
      },
    },
    selectValue: {
      handler(newVal, oldVal) {
        this.selectValue3 = newVal;
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    closeDialog() {
      this.$emit("update:dialogVisible", false);
      this.$emit("updatedialogContent"); //此行代码用于解决，区域监测中弹层关闭，视频监控显示问题
      // startDrag(el.querySelector('.el-dialog__header'), el.querySelector('.el-dialog'), binding.value);
      setTimeout(() => {
        let target = document.querySelector(".el-dialog");
        target.style.left = "";
        target.style.top = "";
        // target.style.marginTop = '0vh';
        target.style.width = "95%";
      }, 500);
    },
    selectChange(e) {
      this.$store.dispatch("pages/setAreaCode", e);
      this.$store.dispatch("pages/setSelectValue", e);
    },
    getList() {
      axios.post("/transgeology/basic/workarea/listNoPage", {}).then((res) => {
        if (res.data) {
          let selectData = res.data.map((item) => {
            return { label: item.workingFaceName, value: item.workingFaceCode };
          });
          let selectValue = selectData[0].value;
          this.$store.dispatch("pages/setAreaCode", selectValue);
          this.$store.dispatch("pages/setSelectValue", selectValue);
          this.$store.dispatch("pages/setSelectData", selectData);
        }
      });
    },
    // confirmDialog() {
    //   // 处理确定按钮点击事件
    //   this.$emit('confirm');
    //   this.closeDialog();
    // },
    // cancelDialog() {
    //   // 处理取消按钮点击事件
    //   this.$emit('cancel');
    //   this.closeDialog();
    // }
  },
  created() {
    this.getList();
  },
};
</script>

<style scoped lang="scss">
@import "@/assets/styles/dateSelect.scss";

.selectshuizhi {
  position: absolute;
  top: 0px;
  left: 120px;
}
::v-deep .el-input--mini .el-input__inner {
  color: #dee1e6;
  background-color: #061f41;
  border: 1px solid #2769b0 !important;
  border-radius: 40px;
}
::v-deep .el-input {
  font-size: 10px;
}

::v-deep .el-dialog__header {
  color: #fff;
  background-color: #113765;
  padding: 15px;
}
::v-deep .el-dialog__body {
  color: #fff;
  padding: 15px;
  background-color: #061f41;
}
::v-deep .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
// .el-table__body-wrapper::-webkit-scrollbar-thumb {
//   border-radius: 3px;
//   background: #1890ff; /* 修改滚动条颜色 */
// }
.el-select-dropdown__list {
  padding: 0 !important;
}
</style>

